<template>
	<view class="zy-column-full">
		<zy-title :leftTitle="user.nick" :rightText="isSelf?'编辑资料':'' " @right="toUserEdit">
			<!-- <template v-slot:right2 v-if="!isSelf">
				<view class="zy-row-center zy-btn-white-capsule zy-mr-lg">
					<view class="zy-dot-green"></view>
					<view class="zy-text-white-sm zy-ml-sm" style="color: #2DC01E;">2小时前在线</view>
				</view>
			</template> -->
		</zy-title>
		<scroll-view class="zy-scroll zy-ph-lg" scroll-y>
			<!-- 用户信息 -->
			<view class="zy-row zy-mt-50">
				<image class="zy-img-info-circle" :src="user.headPicUrl"></image>
				<view class="zy-column-center zy-ml-lg">
					<view class="zy-row">
						<zy-constellation :text="user.constellation"></zy-constellation>
					<!-- 	<image class="zy-icon-sm" mode='widthFix' :src="getImageUrl('constellation_jn.png')"></image>
						<view class="zy-text-white-lg-bold zy-ml-sm">{{user.constellation}}</view> -->
						<image class="zy-icon-sm zy-ml" mode='widthFix' :src="getImageUrl('map_white.png')"></image>
						<view class="zy-text-white-lg-bold zy-ml-sm">{{user.areaStr || '保密'}}</view>
					</view>
					<view class="zy-row zy-mt-sm">
						<view class="zy-btn-grey-sm">65</view>
						<zy-vip-card class="zy-ml-sm"  :type="user.vipType" v-if="user.vip==0"></zy-vip-card>
					</view>
					<view class="zy-text-whitegrey zy-mt-sm">{{getInfo()}}</view>
					<view class="zy-row zy-mt-sm">
						<image class="zy-icon-sm" mode="widthFix" :src="getImageUrl('ic_wx.png')"></image>
						<view class="zy-text-whitegrey-sm">{{$common.getWxStar(user.weChat) || '保密'}}</view>
						<view class="zy-text-whitegrey-sm zy-ml">TeAi号：{{user.userCode}}</view>
					</view>
				</view>
			</view>
			<!-- 我的标签 -->
			<view class="zy-mv-lg">
				<view class="zy-text-whitegrey-lg-bold">我的标签</view>
				<view class="zy-row zy-mt-lg zy-btn-purple-light">
					<image class="zy-icon-lg zy-ml" mode="widthFix" :src="getImageUrl('vip_80.png')"></image>
					<view class="zy-text-gray-dark-lg zy-ml-sm">人气用户 超过全平台80%</view>
				</view>
				<view class="zy-row-wrap zy-mt">
					<zy-tag :list="tags"></zy-tag>
				</view>
			</view>
			<zy-line></zy-line>
			<!-- 去过的地方 -->
			<view class="zy-mv-lg">
				<view class="zy-text-whitegrey-lg-bold">去过的地方</view>
				<view class="zy-row-wrap zy-mt">
					<image style="height: 35rpx;" mode="heightFix" :src="getImageUrl('gq_zg.png')"></image>
				</view>
			</view>
			<zy-line></zy-line>
			<!-- 世界墙 -->
			<view class="zy-mv-lg">
				<view class="zy-text-whitegrey-lg-bold">世界墙</view>
			</view>
			<zy-line></zy-line>
			<dynamic-item v-for="(item,index) in dynamicList" :item="item" :index="index" isInfo @vip="showVip"></dynamic-item>
		</scroll-view>

		<!-- 底部按钮 -->
		<view class="zy-row"
			style="position: absolute; bottom: 20rpx; z-index: 99; width: 100%; box-sizing: border-box; padding: 0 20rpx;"
			v-if="!isSelf">
			<view class="zy-row-center zy-flex zy-btn-main-capsule zy-m">
				<image class="zy-icon" mode="widthFix" :src="getImageUrl('ic_person_white.png')"></image>
				<view class="zy-text-white zy-ml-sm" @click="openFriend">加好友</view>
			</view>
			<view class="zy-row-center zy-flex zy-btn-pink-capsule zy-m">
				<image class="zy-icon" mode="widthFix" :src="getImageUrl('chat_white.png')"></image>
				<view class="zy-text-white zy-ml-sm" @click="toChat">私聊</view>
			</view>
		</view>
		
		<uni-popup ref="friend" type="bottom">
			<zy-popup title="加好友提示" content="你已经向 TA发出加好友申请"
				@cancel="cancelFriend" @ok="okFriend">
			</zy-popup>
		</uni-popup>
		
		<popup-vip ref="vip"></popup-vip>
	</view>
</template>

<script>
	import IMUtil from "@/main/common/IMUtil.js";
	import RouteUtil from "@/main/common/RouteUtil";
	import CacheUtil from "@/main/common/CacheUtil";
	export default {
		data() {
			return {
				online: uni.$constant.online,
				userId: '',
				txCode: '',
				user: {},
				isSelf: false,
				realStatus: false,
				tagList: [],
				banners: [],
				dynamicList: [],
				tagColor: ['tag-blue', 'tag-green', 'tag-yellow', 'tag-pink'],
				tags:[]
			}
		},
		onLoad(option) {
			if (option) {
				this.txCode = option.txCode;
				this.getUser();
			}
		},
		methods: {
			getUser() {
				uni.$http.get('/api/user/getUserInfoByTxCode?txCode=' + this.txCode)
					.then(res => {
						this.user = res.data;
						this.isSelf = this.user.id == CacheUtil.getUserId();
						this.tagList = this.user.tagIdList;
						if (this.user.introPicIdUrl && this.user.introPicIdUrl.length > 0) {
							this.banners = this.user.introPicIdUrl;
						} else {
							this.banners.push(this.user.headPicUrl);
						}
						if (0 == this.user.realNameAuth.realAuthStatus) {
							this.realStatus = true;
						}
						//标签
						if (this.user.tagIdList) {
							this.user.tagIdList.forEach(item=>{
								this.tags.push({name:item});
							})
						}
						//动态
						this.requestDynamic(this.user.id)
					})
			},
			requestDynamic(userId) {
				const params = {
					pageNo: 1,
					userId: userId
				}
				uni.$http.get("/api/dynamic/getOwnOrOthersDynamicList?", params).then(res => {
					this.dynamicList = res.data
				})
			},
			getInfo(){
				let str = this.user.age + '岁';
				if(this.user.heightStr){
					str += " | " + this.user.heightStr;
				}
				if(this.user.weightStr){
					str += " | " + this.user.weightStr;
				}
				return str
			},
			toBack() {
				RouteUtil.back()
			},
			toUserEdit() {
				RouteUtil.toUserEdit(this.user.id)
			},
			toChat() {
				IMUtil.toChat(this.user.txCode)
			},
			toCall(type) {},
			toPersonDynamic() {
				RouteUtil.toDynamicPerson(this.user.id)
			},
			onPreviewImage(list, index) {
				uni.previewImage({
					urls: list,
					current: index,
					fail: (error) => {
						console.log("error: " + JSON.stringify(error));
					}
				})
			},
			randomTag() {
				let index = Math.floor(Math.random() * 4)
				return this.tagColor[index]
			},
			openFriend(){
				this.$refs.friend.open()
			},
			cancelFriend(){
				this.$refs.friend.close()
			},
			okFriend(){
				this.$refs.friend.close()
				RouteUtil.toVip()
			},
			showVip(item){
				this.$refs.vip.open(item.headPicUrl)
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>